<!DOCTYPE html>  
    <html>  
    <head>  
       <title>Bootstrap 实例 - 水平分成两列</title>  
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">      
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>    
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    </head>  
    <body>  
    <div class="container">  
       <h1>Hello, world!</h1>  
       <div class="row">  
          <div class="col-md-12"  style="background-color: #dedef8; border:2px solid blue;">  
             <p>第一列的段落1  
             </p>  
             <p>第一列的段落2  
             </p>  
          </div>  
      
      
          <div class="col-md-6" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第二列的段落1  
             </p>  
             <p>第二列的段落2  
             </p>  
       </div>  
<div class="col-md-6" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div>  
        <div class="col-md-6" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第二列的段落1  
             </p>  
             <p>第二列的段落2  
             </p>  
       </div>  
<div class="col-md-6" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div>  
       <div class="col-md-3" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div> 
       <div class="col-md-3" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div>  
       <div class="col-md-3" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div>  
       <div class="col-md-3" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div> 
       <div class="col-md-4" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div> 
       <div class="col-md-4" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div>
       <div class="col-md-4" style="background-color: #dedef8;border:2px solid blue;">  
             <p>第三列的段落1  
             </p>  
             <p>第三列的段落2  
             </p>  
       </div> 
       

    </div>  
    </body>  
    </html>